@import "jekyll-fdroid";

body {
    background: $global-background;
}

.site-wrapper {
    max-width: $content-width + $spacing-unit;
    margin: 0 auto;
    padding: 0 $spacing-unit/2;
    @include media-query($tablet) {
        padding: 0;
    }
}

/**
 * Header
 */
.site-header {
    background: $content-background;
    z-index: 1;
    @extend %shadow;
}

.site-title {
    display: flex;
    align-items: center;

    &:hover {
        text-decoration: none;
    }

    img {
        margin: $spacing-unit * 2 / 3;
        height: $spacing-unit * 3;

        @include media-query($tablet) {
            height: $spacing-unit * 2;
        }

        @include media-query($phone) {
            margin: $spacing-unit / 2;
            height: $spacing-unit * 1.5;
        }
    }

}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    background: $primary-color;

    .page-link {
        @include button-dark($primary-color);

        &.current {
            $border-height: 6px;
            border-bottom: $border-height solid rgba(255, 255, 255, .4);

            // Prevents the border from making the whole row higher:
            line-height: ($spacing-unit * 1.5) - (2 * $border-height);
            padding-top: $border-height;
        }
    }
}

.material-button {
    display: inline-block;
    border: 0;
    text-transform: uppercase;
    @include button-dark($primary-color);
}

/**
 * Content
 */
.main-content {
    background: $content-background;
    padding: $spacing-unit / 2;
    padding-top: $spacing-unit;
    display: flex;
    @extend %shadow;

    &.with-sidebar {
        .article-area, .sidebar {
            flex-basis: auto;
            width: 0px;

            @include media-query($tablet) {
                width: auto;
            }
        }

        .article-area {
            flex-grow: 4;
        }

        .sidebar {
            flex-grow: 2;
            padding: 0 0 0 $spacing-unit;
            html[dir=rtl] & {
              padding: 0 $spacing-unit 0 0;
            }
        }

        @include media-query($tablet) {
            flex-direction: column;

            .sidebar {
                padding-left: 0;
                padding-top: $spacing-unit * 2;
            }
        }
    }
}

.sidebar-widget {
    margin-bottom: $spacing-unit;

    &:not(:last-of-type) {
        padding-bottom: $spacing-unit;
        border-bottom: 1px solid #ccc;
    }

    @import "sidebar-donate";
    @import "sidebar-news";
}

.sidebar-hidden {
    display: none;
}

/**
 * News
 */
.post-meta {
	img {
		vertical-align: middle;
	}
}

/**
 * Image gallery - used by both Posts and Packages.
 */
.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;

    list-style: none;
    margin: 0;
    padding: 0;

    img {
        margin: 0.5em;
        flex-grow: 1;
        max-width: 300px;
        box-shadow: 3px 3px 6px #aaa;
    }
}

/**
 * Post
 */
.post {
    .post-content {
        img {
            box-shadow: 3px 3px 6px #aaa;
        }
    }
}

/**
 * Package
 */
 .package {

     .feature-graphic {
         width: 100%;
     }
     .package-header {
         .package-icon {
             width: 76px;
             height: 76px;
         }
     }

     .package-whats-new {
         .new-in-version {
            font-size: 1.2em;
            margin-bottom: 0.4em;
         }

         background: #eff4f9;
         padding: 1em;
         margin-bottom: 0.5em;
     }

     .package-description {
         padding: .5em 0 1.5em;
         br {
             margin-bottom: 0.5em;
         }
     }

     .package-version {
        margin: 20px 0;
        padding: 16px;
        background: #F5F5F5;
        // border-bottom: 1px solid #eee;
        p {
          margin: .4em 0;
        }
     }

     .package-anti-features-summary, .package-version-anti-feature-summary, .package-version-permissions-summary {
        font-weight: bold;
        cursor: pointer;
     }

     .package-links {
         @include reset-ul;

         border-top: solid 1px #ccc;
         border-bottom: solid 1px #ccc;
         padding-top: 1em;
         padding-bottom: 1em;
         margin-bottom: 1em;

         .package-link {
             display: inline;
             word-break: keep-all;

             &:after {
                 content: " | ";
             }

             &:last-of-type:after {
                 content: ""
             }
         }
     }

     /**
      * Screenshots on the app details page.
      * These styles apply regardless of whether or not JS is enabled.
      * Other screenshot styles which target .slides instead of .screenshots
      * only apply when JS is enabled, as the .slides class is only applied
      * via JS.
      */
     .screenshot img {
        max-width: 250px;

        @include media-query($phone) {
            width: 100%;
        }
    }

     /**
      * Most of the CSS for the screenshots is from the loryjs documentation:
      * http://meandmax.github.io/lory/
      * The customizations revolve around:
      *
      *   On large screens, overlap the next/previous buttons a little bit with the
      *   leftmost and rightmost portions of the carousel. Also make the hit area the
      *   entire height of the carousel.
      *
      *   On phone screens, hide the left/right feature completely, instead letting
      *   users swipe left and right.
      */
    .slider {
        position: relative;

        .frame {
            position: relative;
            font-size: 0;
            line-height: 0;
            overflow: hidden;
            white-space: nowrap;

            margin: 0 30px;

            @include media-query($phone) {
                margin: 0;
            }
        }
        
        .slides {
            display: inline-block;
        }
        
        .screenshot {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            margin: 10px;

            @include media-query($phone) {
                margin: 5px;
            }
        }
        
        .prev, .next {
            position: absolute;
            display: block;
            cursor: pointer;
            
            margin-top: 0;
            top: 0;
            height: 100%;
            width: 50px;

            &.disabled svg {
                opacity: 0.3;
            }
            
            @include media-query($phone) {
                display: none
            }
        }
        
        .next {
            right: 0;
            svg {
                right: 0;
            }
        }
        
        .prev {
            left: 0;
        }
        
        .next svg, .prev svg {
            width: 25px;

            position: absolute;
            top: 50%;
            margin-top: -25px;
        }
    }

    .package-version-permissions-list {
      list-style-type: none;
      margin-bottom: .8em;
      .permission {
        position: relative;
        margin-bottom: .2em;
        &:before {
          content: "";
          position: absolute;
          width: 7px;
          height: 3px;
          margin-top: .7em;
          margin-left: -.9em;
          background-color: #444;
        }
        .permission-label {
          font-weight: bold;
        }
        .permission-description {
          color: #444;
          font-size: .9em;
          line-height: 1.3em;
        }
      }
    }
 }
 

/**
 * Language chooser
 */
.sidebar-widget.language {
    padding-bottom: 0.5em;
    text-align: right;

    .lang-flag {
        margin: 0 0.1em;
        vertical-align: middle;
        max-width: 2em;
        max-height: 1em;
    }
}

/**
 * Search results
 */
.sidebar-widget div.awesomplete {
  display: block !important;

  li:hover, li[aria-selected="true"] {
    background: $primary-color !important;
    .package-header {
      .package-name, .package-desc .package-summary {
        color: white;
      }
    }
  }

  .search-input {
      width: 100%;
  }
}

.sidebar-widget {
  .connect-item {
    display: flex;

    .connect-icon {
      width: 24px;
      height: 24px;
    }

    .connect-label {
      margin-left: 4px;
    }
  }
}

.search-form {
  display: flex;
}

.search-input-wrp {
  margin: 0 6px 0 0;
  html[dir=rtl] & {
    margin: 0 0 0 6px;
  }
  display: flex;
  flex: 1;
}

.search-input {
  padding: 0.4em;
  font-size: 1.1em;
  box-sizing: border-box;
  width: 100%;
  padding-left: 40px;
  background: url('../assets/ic_search_black_24px.svg') no-repeat 10px center;
  border-radius: 4px;
  border: solid 1px #aaa;
}

.post-content {
    .search-widget {
        margin-bottom: 1em;
    }
}

.search-input:focus {
  margin: 0;
  border: solid 2px $primary-color;
}

.results {
  @include reset-ul;
  margin: 1em 0;
}


/**
 * Footer
 */
.site-description {
    font-size: $small-font-size;
    @include media-query($tablet) {
        padding: 0 $spacing-unit/2;
        text-align: center;
    }
}

.edit-this-page-area {
    float: inline-end;
    @include media-query($tablet) {
        float: none;
        display: block;
        margin-top: .5em;
    }
}

/**
 * Miscellaneous
 */
img {
    /**
     * There should be no reason for any image to spread beyond its parent container.
     * This makes images responsive on smaller screens.
     */
    max-width: 100%;
}

/**
 * Home page
 */
.download-and-screenshot {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .download {
        padding: 1em;
        text-align: center;

        .qr {

            img {
                width: 200px;
            }

            @include media-query($tablet) {
                display: none;
            }

            @include media-query($phone) {
                display: none;
            }
        }
    }

    .screenshot {
        display: block;

        max-width: 60%;

        @include media-query($tablet) {
            max-width: 100%;
        }

        @include media-query($phone) {
            max-width: 100%;
        }
    }
}

/**
 * Tutorials
 */
.tutorial {
    h2 {
        color: #0066cc;
    }

    h3 {
        padding-bottom: 14px;
        margin-bottom: 0;
    }

    h4 {
        /*font-family: HelveticaNeue-Medium, serif;*/
        font-size: 12px;
        color: #757575;
        letter-spacing: 0.13px;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .tutorial-overview {
        @include reset-ul;

        & > li {
            padding: 10px 0 10px 50px;

            background: no-repeat left center;
            
            &.link {
                background-image: url('../assets/tutorials/add-repo/icons/ic_link.svg');
            }

            &.qr {
                background-image: url('../assets/tutorials/add-repo/icons/ic_qr.svg');
            }

            &.no-internet {
                background-image: url('../assets/tutorials/add-repo/icons/ic_no_internet.svg');
            }
        }
    }

    .steps {
        @include reset-ul;
        display: flex;
        flex-wrap: wrap;

        .step {

            box-sizing: border-box;
            max-width: 24%;

            @include media-query($tablet) {
                max-width: 32%;
            }

            @include media-query($phone) {
                max-width: 100%;
            }

            img {
                width: 200px;
                height: auto;
                max-width: 100%;

                &:not(.irregular) {
                    box-shadow: #aaa 0 2px 5px;
                }
            }

            padding: 21px;

            h4 {
                margin: 1em 0 0.5em 0;
            }

            p {
                margin: 0;
            }

        }
    }

    /* Allow an individual ".step" or entire collections of ".steps" to be tagged as ".medium" or ".large". */
    .steps .step.medium, .steps.medium .step {
        max-width: 33%;

        img {
            width: 350px;
            height: auto;
            max-width: 100%;
        }

        @include media-query($tablet) {
            max-width: 49%;
        }
    }

    .steps .step.large, .steps.large .step {
        max-width: 49%;

        img {
            width: 460px;
            height: auto;
            max-width: 100%;
        }

        @include media-query($tablet) {
            max-width: 100%;
        }
    }

    .tutorial-paginator {
        margin: - $spacing-unit / 2;
        margin-top: $spacing-unit / 2;
        padding: $spacing-unit / 2;
        display: flex;
        justify-content: space-between;
        background-color: #f9f9f9;

        .next a {
            text-align: right;
            padding-right: 32px;
            background: url('../assets/tutorials/icons/ic_right.svg') no-repeat right 5px;
        }
        
        .previous a {
            padding-left: 32px;
            background: url('../assets/tutorials/icons/ic_left.svg') no-repeat left 5px;
        }

        a {
            display: block;
            color: black;

            &:hover {
                text-decoration: none;
            }
        }

        .label {
            font-size: 1.3em;
        }

        .description {

        }
    }
}

.tutorials-list {
    .tutorials-info {

    }

    .tutorial-list-item {
        margin-top: 48px;

        h3 {
            font-weight: bold;
            margin-bottom: 8px;
        }

        .link {
            margin: 12px 0;
            font-size: 18px;
        }
    }
}

a.youtube {
    position: relative;

    /** Clever solution from https://stackoverflow.com/a/12660106/2391921 to overlay image on top with only CSS */
    &:after {
        position: absolute;
        content: "";
        pointer-events: none;

        background: url("../assets/youtube-logo.png") no-repeat center;
        background-size: cover;

        width: 200px;
        height: 200px;

        left: calc(50% - 100px);
        bottom: calc(50% + 100px);
    }


}
